<template>
  <div class="content">
    <el-drawer
      title="文章详情"
      :visible.sync="drawer"
      :before-close="handleClose"
      :wrapperClosable="false"
      size="40%"
    >
      <!-- 作者介绍 -->
      <el-card class="course_info">
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-avatar
              style="width: 80px; height: 80px; margin-top: 25px"
              :src="require('../../assets/img/avator.jpg')"
            ></el-avatar>
          </el-col>
          <el-col :span="18">
            <h3 style="display: flex; align-items: center; gap: 10px;">
              {{ formData.articleAuthor }}
              <el-button
                :type="isFollowed ? 'success' : 'primary'"
                size="mini"
                plain
                :style="{ borderRadius: '12px', fontWeight: 'bold' }"
                @click="toggleFollow"
              >
                <i
                  :class="isFollowed ? 'el-icon-check' : 'el-icon-plus'"
                  style="margin-right: 5px;"
                ></i>
                {{ isFollowed ? '已关注' : '关注' }}
              </el-button>
            </h3>
            <p class="lecturer_desc">
              {{ formData.articleSummary }}
            </p>
            <p class="lecturer_desc" style="margin-top: 8px;">
              <span style="font-size: 15px"><i class="el-icon-thumb" style="margin-right: 2px;"></i>500</span>&nbsp;
              <span style="font-size: 15px"><i class="el-icon-star-on" style="margin-right: 2px; color: orange; font-size: 18px"></i>500</span>&nbsp;
              <span style="font-size: 15px"><i class="el-icon-share" style="margin-right: 2px;"></i>600</span>&nbsp;
            </p>
          </el-col>

        </el-row>
      </el-card>
      <!-- 课程封面 -->
      <div style="width: 95%; margin: 0px auto">
        <el-image
          :src="formData.articleImage"
          fit="contain"
        />
      </div>
      <!-- 课程内容 -->
      <el-card class="course_info">
        <mavon-editor
          v-model="formData.articleContent"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
        />
      </el-card>
    </el-drawer>
  </div>
</template>

<script>

import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      drawer: false,
      isFollowed: false, // 关注状态
      formData: {
        id: "",
        articleAuthor: "",
        articleSummary: "",
        fans: "",
        articleImage:"",
        articleContent:""
      },
    };
  },
  methods: {
    async getArticleDetail() {
      const result = await this.$axios.get("/Article/getById", {
        params: { id: this.formData.id },
      });
      if (result.data.success) {
        this.formData = result.data.data
      } else {
        this.$message.error(result.data.message);
      }
    },
    toggleFollow() {
      this.isFollowed = !this.isFollowed;
    },
    handleClose() {
      this.drawer = false;
    },
  },
};
</script>

<style scoped>
.course_info {
  margin: 0px 10px 10px;
}
.lecturer_desc {
  color: gray;
  font-size: 14px;
}
</style>
